<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<c:set var="cp" value="<%=request.getContextPath() %>"></c:set>
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>my-admin1.0</title>
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,ch0rome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
	<link rel="stylesheet" href="lib/layui/css/layui.css">
	<link rel="stylesheet" type="text/css" href="<c:url value='/css/webuploader.css'/>">
    <script src="lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript"  src="<c:url value='/js/jquery.min.js'/>"></script>
	<script type="text/javascript" src="<c:url value='/js/webuploader.js'/>"></script>
    <style type="text/css">
    .layui-table-cell{
height:auto !important;
}
    </style>
</head>
<body class="child-body" style="padding: 10px 15px 15px 15px">     
<div class="child-nav">
    <span class="layui-breadcrumb" style="visibility: visible;">
         <a>我的工作台</a><span lay-separator="">/</span>
         <a><cite>文件上传</cite></a>
    </span>
</div>
<hr class="layui-bg-gray">
<div>
		 <div style="margin-left: -15px">		    
		    <div class="layui-form-item" ><div class="layui-inline">
		    <label class="layui-form-label"><button type="button" class="layui-btn" id="test3"><i class="layui-icon"></i>选择文件</button></label>
		    <div class="layui-input-block"  style="padding-top: 10px;padding-left: 10px">
		     <input type="text" id="name" name="name" required lay-verify="required" autocomplete="off" placeholder="请输入文件名称" class="layui-input" maxlength="30">		     	
		     </div>
		     </div>
		     <button type="button" class="layui-btn" id="testListAction"  style="margin-bottom: 4px">上传文件</button>
              <span style="color: red;">( 上传文件格式为mp4,avi,rmvb,mp3)</span>
		     </div>
		   
		 </div>	
		 																																
	     <table class="layui-table" lay-data="{url:'listSp.htm', page:true, id:'test',limit: 5,limits:[5,10,20]}" lay-filter="test"> 
	      <thead>
	      		<tr >
					<th lay-data="{field:'title', width:380}">视频/音频名称</th>
					<th  lay-data="{width:480,templet: '#titleTpl'}">视频/音频</th>
					<th lay-data="{toolbar: '#barDemo'}">操作</th>
				</tr>
	      </thead>
	      <tbody  id="fileList" class="uploader-list" style="margin-top:10px;">
	         
	      </tbody>         
        </table>
</div> 
<script type="text/html" id="barDemo">
 	 <a class="layui-btn layui-btn-sm layui-btn-danger" lay-event="del">删除</a>
	</script>
	<script type="text/html" id="titleTpl">
  {{#  if(d.type==1){ }}
			<video width="100" height="100" controls >
        	<source src="${cp}/upload/{{d.path}}" type="video/mp4">
        	<object data="${cp}/upload/{{d.path}}" width="100" height="100">
            <embed width="100" height="100" src="movie.swf">
        	</object></video>
  {{#  } else { }}

  {{#  } }}
	</script>
<script>
layui.use(['table','upload'], function(){
	var  table = layui.table;	
	  
	  var upload = layui.upload;
	   
	  upload.render({
		    elem: '#test3'
		    ,url: '${cp}/uploadUtils/uploadHead.htm'
    	    ,auto: false //选择文件后不自动上传
    	    ,bindAction: '#testListAction' //指向一个按钮触发上传
    	   ,accept: 'file' //普通文件
    	    ,exts: 'mp3|mp4|avi|rmvb' //只允许上传压缩文件
	    	,data: {
	    		  name: function(){
	    		    return $('#name').val();
	    		  }
	    		}
		    ,choose: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
		    	  obj.preview(function(index, file, result){
		    		  var filename=file.name;
		    		  $('#name').val(filename.split(".")[0]);
		    	  });
		    }
		    ,done: function(res){
		    	table.reload('test'); 
		    }
		  });
	   
	   //监听行工具事件
    table.on('tool(test)', function(obj){
      var data = obj.data;
      parent.layer.confirm('确认删除该视频吗？', function(index){
    	  $.ajax({
    			type: 'POST',
    			async:false,
    			url:"${cp}/delete.htm",
    			data:{"id":data.id},
    			success:function (data){	
    				if(data=="success"){
    					 parent.layer.close(index);
    					 table.reload('test'); 
    				}else{
    					layer.msg("删除失败！")
    				}
    			}
    	    });    	 
        });
    });
});
//图片上传
jQuery(function() {
	var $ = jQuery, $list = $('#fileList'),
	// 优化retina, 在retina下这个值是2
	ratio = window.devicePixelRatio || 1,
	// 缩略图大小
	thumbnailWidth = 100 * ratio, thumbnailHeight = 100 * ratio,
	// Web Uploader实例
	uploader;
	// 初始化Web Uploader
	uploader = WebUploader.create({
		// 自动上传。
		auto : true,
		// 可以重复上传
		duplicate:true,
		// swf文件路径
		swf : '${cp}/js/webuploader.js',
		// 文件接收服务端。
		server : '${cp}/uploadUtils/uploadHead.htm',
		// 选择文件的按钮。可选。
		// 内部根据当前运行是创建，可能是input元素，也可能是flash.
		pick : '#filePicker',
		// 只允许选择文件，可选。
		accept : {
			title : 'file',
			extensions : 'mp4,avi,rmvb,mp3',
		}
	});

   // 文件上传成功，给item添加成功class, 用样式标记上传成功。
	uploader.on('uploadSuccess', function(file, response) {
	
		table.reload('test'); 
	}); 

	// 文件上传失败，现实上传出错。
	uploader.on('uploadError', function(file) {
		var $li = $('#' + file.id), $error = $li.find('div.error');

		// 避免重复创建
		if (!$error.length) {
			$error = $('<div class="upload_error"></div>').appendTo($li);
		}

		$error.text('上传失败');
	});

	//图片
	uploader.on('error', function(handler) {
        if(handler == "Q_TYPE_DENIED"){
			alert("附件类型错误");
		}else if(handler == "Q_EXCEED_SIZE_LIMIT"){
			alert("附件过大");
		} 
	});
});

</script>
</body>
</html>